<template>
  <div class="outter-wrap">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="itemname">
            <el-input v-model="form.itemname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目编号" prop="itemno">
            <el-input v-model="form.itemno"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目级别" prop="itemlevel">
            <el-input v-model="form.itemlevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立项时间" prop="setdate">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.setdate" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="立项单位" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批准单位" prop="agreeunit">
            <el-input v-model="form.agreeunit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="您的身份" prop="role">
            <el-select
                v-model="form.role"
                placeholder="请选择您的参与身份"
                style="width: 100%;"
            >
              <el-option label="负责人" value="0"></el-option>
              <el-option label="参与人" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="鉴定结论" prop="conclusion">
        <el-input type="textarea" v-model="form.conclusion" placeholder="请输入鉴定结论"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="18">
          <el-form-item label="实证文件">
            <el-radio-group v-model="form.hasEvidence">
              <el-radio label="已上传"></el-radio>
              <el-radio label="未上传"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-link type="primary" @click="exportCurrentFile" :disabled="isdisabled">文件下载</el-link>
        </el-col>
      </el-row>
      <el-form-item  label="更新文件">
          <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="true"
              :multiple="false"
              :on-change="addFile"
              :on-remove="removeFile"
              :auto-upload="false"
              accept=".zip"
              :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传zip压缩文件,建议≤200M</div>
          </el-upload>
        </el-form-item>
      <el-form-item>
        <el-button type="success" round @click="onSubmit('form')">确认修改</el-button>
        <el-button type="info" round @click="cancelModify">取消修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as Index_ModifyService from "@/service/index/indexService";
import * as UploadService from '@/service/upload/uploadService'
import fileDownload from "js-file-download";
import * as UUIDUtil from "@/service/utils/UUIDUtil";
export default {
  name: "EduReformItem",
  data(){
    return {
      form: {
        id:'',//项目id
        recordid:"",//记录id
        email:'',//邮箱号
        itemname:'',//项目名称
        itemno:'',//项目编号
        itemlevel:'',//项目级别
        setdate:'',//立项时间
        unit:'',//立项单位
        agreeunit:'',//批准单位
        role:"",//身份[0-负责人;1-参与人]
        conclusion:"",//鉴定结论
        hasEvidence:false,//是否有实证文件
        evidence:'',//实证文件远程存储链接
        file:'',//实证文件对象
      },
      isdisabled:false,//是否禁用文字链接
      //表单验证规则
      rules:{
        itemname:[{required:true,message:"请输入项目名称",trigger:"blur"}],
        itemno:[{required:true,message:"请输入项目编号",trigger:"blur"}],
        itemlevel:[{required:true,message:"请输入项目级别",trigger:"blur"}],
        setdate:[{required:true,message:"请输入立项时间",trigger:"blur"}],
        unit:[{required:true,message:"请输入立项单位",trigger:"blur"}],
        agreeunit:[{required:true,message:"请输入批准单位时间",trigger:"blur"}],
        role:[{required:true,message:"请选择您的参与身份",trigger:"blur"}],
        conclusion: [{required:false,message:"建议填写鉴定结论",trigger:"blur"}],
      }
    }
  },
  computed:{
    onEditData(){
      return this.$store.state.editData;
    }
  },
  watch:{
    onEditData(newVal){
      if(newVal&&newVal.type=="教改项目"&&newVal.data){
        console.log(newVal)
        this.form.id=newVal.data.id;
        this.form.recordid=newVal.data.itemPartner.itemno;
        this.form.email=newVal.data.itemPartner.partner;
        this.form.itemname=newVal.data.itemname;
        this.form.itemno=newVal.data.itemno;
        this.form.itemlevel=newVal.data.itemlevel;
        this.form.setdate=newVal.data.setdate;
        this.form.unit=newVal.data.setunit;
        this.form.agreeunit=newVal.data.agreeunit;
        this.form.role=newVal.data.itemPartner.role;
        this.form.conclusion=newVal.data.conclusion;
        this.form.hasEvidence=newVal.data.itemPartner.evidence?"已上传":"未上传";
        this.form.evidence=newVal.data.itemPartner.evidence;
        if (this.form.evidence){
          this.isdisabled=false;
        }else{
          this.isdisabled=true;
        }

      }
      }
  },
  methods: {
    //取消修改
    cancelModify(){
      //修改全局状态值-隐藏弹出窗口
      this.$store.commit("setIsShowPopOver",false);
    },
    //添加文件操作
    addFile(file){
      this.form.file=file.raw;
    },
    removeFile(){
      this.form.file=undefined;
    },
    exportCurrentFile(){
      if (!this.form.evidence){
        this.$message.error("文件导出失败!")
        return false;
      }
      UploadService.downloadFile(this.form.email,this.form.evidence).then(res=>{
        fileDownload(res.data,UUIDUtil.uuid()+".zip");
        this.$message.success("正在导出文件!")
      }).catch(()=>{
        this.$message.error("文件导出失败!")
      })
    },
    //更新用户信息
    updateInfo(){
      //更新用户信息
      console.log(this.form);
      Index_ModifyService.updateEduReformItemInfo({
        itemname:this.form.itemname,
        itemno:this.form.itemno,
        itemlevel:this.form.itemlevel,
        setunit:this.form.unit,
        setdate:this.form.setdate,
        agreeunit:this.form.agreeunit,
        conclusion:this.form.conclusion,
        "itemPartner.itemno":this.form.recordid,
        "itemPartner.partner":this.form.email,
        "itemPartner.role":this.form.role,
        "itemPartner.evidence":this.form.evidence,
      }).then(res=>{
        if (res.data==1){
          this.$message.success("修改信息已提交");
          //修改store状态值,关闭窗口
          this.$store.dispatch("setIsShowPopOverAsync",false);
          //重新请求分页数据-数据刷新
          this.$store.dispatch("setUpdateInfoAsync",new Date().getTime())
        }else {
          this.$message.error("信息修改失败,请稍后再试!")
        }
      }).catch(()=>{
        this.$message.error("信息修改失败,请稍后再试!")
      })
    },
    //更新文件和用户信息
    updateFileAndInfo(){
      if (this.form.evidence){
        //删除原有文件
        UploadService.deleteFile({
          email:this.form.email,
          url:this.form.evidence,
        }).then((res)=>{
          console.log(res)
        }).catch(()=>{})
      }
      //上传新文件
      let formdata = new FormData();
      formdata.append("file",this.form.file);
      formdata.append("username",this.form.email);
      UploadService.uploadFile(formdata).then(res=>{
        if (res.data && res.data.status) {
          //文件已上传成功
          this.$message({
            message: '已覆盖原始文件！',
            type: 'success',
          })
          //重设evidence属性
          this.form.evidence=res.data.url;
          //更新用户信息
          this.updateInfo();
        }else {
          this.$message.error("文件覆盖失败!")
        }
      }).catch(()=>{
        this.$message.error("文件覆盖失败,请稍后再试")
      })
    },
    onSubmit(form) {
      this.$refs[form].validate(valid=>{
        if (valid){
          //更新文件
          if (this.form.file){
            console.log("pre-更新文件")
            //更新文件和用户信息
            this.updateFileAndInfo();
          }else {
            console.log("nopre-更新用户信息")
            //直接更新用户信息
            this.updateInfo();
          }
        }else {
          this.$message.error("信息填写不完整!")
        }
      })
    }
  }
}
</script>

<style scoped>
.outter-wrap{
  padding: 15px;
}
</style>